<script setup lang="ts">
    import { ref, onMounted } from "vue"
    import * as PIXI from "pixi.js"
    import { Graphics } from "pixi.js"
    import PIXIAppHandler from "@/module/PIXIAppHandler"
 
    const gameground : any = ref(null)
    const handler = ref()

    onMounted(() => {
        handler.value = PIXIAppHandler.getInstance()
        if(gameground.value != null)
          gameground.value.appendChild(handler.value.pixiapp.view)
        initBoard()
      }
    )

    //初始化画板
    const initBoard = () => {
      handler.value.pixiapp.renderer.backgroundColor = 0xf9f9f9
      handler.value.drawRuler()
    }

    
</script>

<template>
  <el-card id="printBoard" body-style="{padding: 0}">
    <div id="pixi" ref="gameground" > 
    </div>
  </el-card>
</template>

<style scoped>
  #pixi {
    z-index: -1;
    margin-top: 30px
  }
  #printBoard{
    margin-top: 40px;
    padding: 0px;
    height: 1000px;
    width: 1400px;
  }
</style>